<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        /**
         * easyui 初始化控件
         * 语法格式: $().控件名称(可选择的初始化JSON参数);
         *
         * easyui 控件方法调用
         * 语法格式: $().控件名称(方法名称,参数...);
         */
        //对话框
       $(function () {
           $("#dg").dialog({
               title:"对话框",//对话框名称
               width:700,//宽度
               height:500,//高度
               cache:false,//是否开启缓存
               href:"",//远程资源地址
               closed:false,//是否关闭对话框
               iconCls:"icon-save",//小图标
               modal:true,//是否开启遮罩
               buttons:[{//自带按钮
                   text:"提交",
                   iconCls:"icon-ok",
                   //点击方法
                   handler:function () {
                       //选中一个下拉选项,第二个值为value值,会将value与之相同的option选中
                       $("#sel").combobox("select",1);
                       //获取当前选中的值
                       alert( $("#sel").combobox("getValue"));
                   }
               },{
                   text:"关闭",
                   iconCls:"icon-remove",
                   handler:function () {
                        //赋值方法
                        $("#tx").textbox("setValue","123");
                        //取值方法
                       console.log($("#tx").textbox("getValue"));
                   }
               }]
           });


           //easyui  下拉列表框
           $("#sel").combobox({
               url:"/test/getComBox",//远程数据请求地址
               value:"请选择...",//字段的默认值
              /* data: [{ //本地静态数据
                   label: 'java',
                   value: 'Java'
               },{
                   label: 'perl',
                   value: 'Perl'
               },{
                   label: 'ruby',
                   value: 'Ruby'
               }],*/
               valueField:"label",//相当于option的value
               textField:"value",//相当于option的text
               width:200,//宽度
               filter: function(q, row){//过滤器
                   var opts = $(this).combobox('options');
                   return row[opts.textField].indexOf(q) == 0;
               }

           });

           //树形控件
           $("#tre").tree({
               url:"/test/getTree",//远程数据请求地址
               method:"post",//请求方式
               animate:true,//节点展开方式
               checkbox:true//节点选择框
           });

       });

       
       
       function  opendiv() {
           //打开关闭的对话框
           $("#dg").dialog("open");

           //关闭对话框
           $("#dg").dialog("close");
       }
    </script>
</head>
<body>
   <button type="button" onclick="opendiv()">提交</button>
   <div id="dg">
       <div style="margin-bottom:20px">
          <select id="sel"></select>
       </div>
       <div style="margin-bottom:20px">
           <input id="tx" class="easyui-textbox" name="name"
                  style="width:50%" data-options="label:'订单号:'">
       </div>

       <ul id="tre"></ul>
   </div>
</body>
</html>
